<template>
	<view class="page-form">
		<q-navbar title="信息录入"></q-navbar>
		<view class="center">
			<u-form :model="form" ref="uForm" :rules="rules" :label-width='150'>
				<u-form-item label="所属地">
					<u-input input-align="right" v-model="form.deptName" />
					<view slot="right">
						<u-icon name="arrow-right" @click="showtree=true"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="品类名称">
					<q-dict v-model="form.name" :type="plantMainList" ref="dictPL" @dict="(e,v)=>{form.name=e}"
						valueName="merchandiseId" labelName="merchandiseName" />
				</u-form-item>
				<u-form-item label="经销商名称">
					<q-dict v-model="form.agentName" :type="dealerList" ref="dictJXS" @dict="(e,v)=>{form.agentName=e}"
						valueName="dictValue" labelName="dictLabel" />
				</u-form-item>
				<u-form-item label="农资类型" prop="agriculturalTypeId">
					<q-dict v-model="form.agriculturalTypeId" :type="typelist" ref="dictNZ"
						@dict="(e,v)=>{form.agriculturalTypeId=e}" valueName="dictValue" labelName="dictLabel" />
				</u-form-item>
				<u-form-item label="农资投入量" prop="agriculturalUseNum">
					<u-input input-align="right" v-model="form.agriculturalUseNum" />
				</u-form-item>
				<u-form-item label="农资销售量" prop="agriculturalSaleNum">
					<u-input input-align="right" v-model="form.agriculturalSaleNum" />
				</u-form-item>
				<u-form-item label="销售金额" prop="agriculturalSaleAmount">
					<u-input input-align="right" v-model="form.agriculturalSaleAmount" />
				</u-form-item>
			</u-form>

			<view class="btn-box">
				<q-button :isPosition='false' :name='btnName' @submit="submit"></q-button>
				<q-button v-if="form.id" :isPosition='false' name='删 除' @submit="showDEl=true" type='error'></q-button>
			</view>
		</view>

		<view class="dropdown-box">
			<u-popup v-model="showtree" mode="bottom" height="600rpx">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<tree :list='treeList' :id="form.deptId" @change='onnodeclick'></tree>
				</scroll-view>
			</u-popup>
		</view>
		<u-modal v-model="showDEl" content="删除后不能恢复,确认删除吗？" :show-cancel-button='true' @confirm='del'></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import tree from '@/components/xtx-treeNode/xtx-treeNode.vue'
	import {
		getDicts
	} from '@/api/modules/dict/data.js'
	export default {
		components: {
			tree
		},
		props: {},
		data() {
			return {
				btnName: '提 交',
				showtree: false,
				node: '',
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				form: {
					name: '',
					intro: '',
					sex: '',
					agriculturalTypeId: '',
					agriculturalUseNum: '',
					agriculturalSaleNum: '',
					agriculturalSaleAmount: ''
				},
				radioList: [{
						name: '自营',
						disabled: false
					},
					{
						name: '流转',
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				rules: {
					agriculturalSaleAmount: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					agriculturalSaleNum: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				},
				treeList: [],
				plantMainList: [],
				dealerList: [],
				typelist: [], //农资
				showDEl: false,
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// 绑定校验
			// this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.form.id = options.id
			this.$nextTick(() => {
				if (options.id) {
					this.btnName = '修 改'
					this.findDetail()
				}
			})
			this.findTree()
			this.getTypeList()
			this.getDealerList()
			this.findPosition()
		},
		onShow() {},
		methods: {
			findTree() {
				this.$api.deptTreeSelect({
					ancestors: '0,100,1631,200',
				}).then(res => {
					this.treeList = res.data
					this.node = this.treeList[0]
				})
			},
			// 点击树控件节点
			onnodeclick(node) {
				this.form.deptId = node.id
				this.form.deptName = node.label
				this.showtree = false
			},
			// 查详情
			findDetail() {
				this.$api.getAgricultural(this.form.id).then(res => {
					this.form = res.data
					this.deptName = res.data.deptName
					this.$refs.dictPL.init(res.data.name)
					this.$refs.dictJXS.init(res.data.agentName)
					this.$refs.dictNZ.init(res.data.agriculturalTypeId)
				})
			},
			submit() {
				console.log('this.$refs.uForm', this.$refs.uForm);
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							this.$api.updateAgricultural(this.form).then(response => {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									url: '/pages/index/index'
								})
							});
						} else {
							this.$api.addAgricultural(this.form).then(response => {
								this.$refs.uToast.show({
									title: '新增成功',
									type: 'success',
									url: '/pages/index/index'
								})
							});
						}
					}
				});
			},
			del() {
				this.$api.delAgricultural(this.form.id).then(res => {
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success',
						url: '/pages/index/index'
					})
				})
			},
			// 品类
			async getTypeList() {
				let res = await this.$api.listGoods({
					pageNum: 1,
					pageSize: 10000,
					categoryId: 'ltpivjjw-1d3ufgyz-hsuwll-0000001',
				})
				this.plantMainList = res.data.rows
			},
			// 经销商
			// async getDealerList() {
			// 	let res = await this.$api.listGoods({
			// 		pageNum: 1,
			// 		pageSize: 10000,
			// 		categoryId: 'ltqnwzn0-1d3wzt86-hsuwlk-0000001',
			// 	})
			// 	this.dealerList = res.data.rows
			// },
			async getDealerList() {
				let res = await getDicts('jingxiao')
				this.dealerList = res.data
			},
			// 查询农资
			async findPosition() {
				let res = await getDicts('nongzi')
				this.typelist = res.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-form {
		height: 100vh;
		width: 100vw;
		background-color: #f7f7f7;
		overflow: hidden;

		.center {
			width: 95%;
			margin: 20rpx auto 0;
			height: 93vh;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 20rpx 20rpx;
			overflow-y: auto;

			.lable {
				font-size: 28rpx;
				font-weight: 700;
				// margin-top: 20rpx;
			}


			.btn-box {
				width: 80vw;
				margin: 50rpx auto;
			}

			.dropdown-box {
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>